<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>鼠标拖动</title>
    <style>
        body{margin:0}
        .box{width:400px;height:300px;border:5px solid #eee;box-shadow:2px 2px 2px 2px #666;position:absolute;top:30%;left:30%}
        .hd{width:100%;height:25px;background-color:#7c9299;border-bottom:1px solid #369;line-height:25px;color:#fff;cursor:move}
        #box_close{float:right;cursor:pointer}
      </style>
  </head>
  <body>
    <div id="box" class="box">
      <div id="drop" class="hd">
        注册信息 (可以拖拽)
        <span id="box_close">【关闭】</span>
      </div>
      <div class="bd"></div>
    </div>
    <script>
    
      var box = document.getElementById('box');
      var drop = document.getElementById('drop');
      drop.onmousedown = function(event) {        
        var event = event || window.event;
        var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
        var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
        var spaceX = pageX - box.offsetLeft;
        var spaceY = pageY - box.offsetTop;
        document.onmousemove = function(event) {    
          var event = event || window.event;
          var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
          var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
          box.style.left = pageX - spaceX + 'px';
          box.style.top = pageY - spaceY + 'px';
          window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        };
      };
      document.onmouseup = function() { 
        document.onmousemove = null;
      };
    </script>
  </body>
</html>